<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
// データベースのオープン
var db = openDatabase("mycom_sample", "", "Sample for mycom", 1024*1024);
// テーブルの作成
db.transaction(function(tx) {
  tx.executeSql("create table if not exists storage (name, val)");
});
function load() {
  db.transaction(function(tx) {
    tx.executeSql("select * from storage", [], function(tx, rs) {
      var list = document.getElementById("list");
      list.innerHTML = "";
      var rows = rs.rows;
      // storageテーブルに格納されている全ての値を列挙
      for (var i = 0, n = rows.length; i < n; i++) {
        var row = rows.item(i);
        list.options[list.options.length] = new Option(row.val, row.name);
      }
    });
  });
}
function remove() {
  var list = document.getElementById("list");
  if (list.selectedIndex < 0) {
    return;
  }
  var selected = list.options[list.selectedIndex].value;
  // 選択された項目を削除
  db.transaction(function(tx) {
    tx.executeSql("delete from storage where name = ?", [selected], function() {
      load();
    });
  });
}
function add() {
  var name = document.getElementById("name").value;
  var value = document.getElementById("value").value;
  // storageテーブルに値を格納
  db.transaction(function(tx) {
    tx.executeSql("insert into storage (name, val) values (?, ?)", [name, value], function() {
      load();
    });
  });
}
</script>
</head>
<body onload="load()">
<h1>Databaseのサンプル</h1>
<select id="list" size="5" style="width: 100px"></select>
<button onclick="remove()">削除</button><br>
キー:<input type="text" id="name"><br>
値:<input type="text" id="value">
<button onclick="add()">追加</button><br>
</body>
</html>

